<template>
  <div class="left-menu">
    <div class="logo" @click="changeCollapse">
      <img src="@/assets/img/logo.svg" alt="" class="icon">
      <span class="title" v-show="!isCollapse">运动会赛事系统</span>
    </div>
    <el-menu 
      background-color="#001529" 
      text-color="#ccc"
      active-text-color="#fff" 
      :collapse="isCollapse"
      :default-active="currentPath"
      class="nav-menu"
      unique-opened
      router>
      <el-menu-item v-for="menu in menus" :key="menu.id" :index="menu.path">
        <template #title>
          <span>{{menu.name}}</span>
        </template>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { ref ,computed} from 'vue';
import { useLoginStore } from '@/store';
// import {IMenu} from '@/types'
import { useRoute } from 'vue-router';
const loginStore = useLoginStore()
const menus: any[] = loginStore.rights
const isCollapse = ref(false)
const emits = defineEmits(['changeCollapse'])
const changeCollapse = () => {
  isCollapse.value = !isCollapse.value
  emits('changeCollapse',isCollapse.value)
}
const route = useRoute()
const currentPath = computed(() => route.path)




</script>

<style scoped lang="less">
.left-menu{
  background-color: #001529;
  height: 100%;
  width: 100%;
  .logo{
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    line-height: 48px;
    width: 100%;
    .icon{
      width: 28px;
      height: 28px;
      padding-right: 5px;
    }
  }
  .nav-menu .el-menu-item.is-active {
    color: #fff !important;
    background-color: #0a60bd !important;
  }
  .el-menu {
    border-right: none;
  }
}
</style>